import Vue from 'vue'
import VueRouter from 'vue-router'

import { getToken } from '@/utils/storage'

// 导入一级路由
// import Layout from '@/views/layout'
// import Detail from '@/views/detail'
// import Register from '@/views/register'
// import Login from '@/views/login'
const Layout = () => import('@/views/layout')
const Detail = () => import('@/views/detail')
const Register = () => import('@/views/register')
const Login = () => import('@/views/login')

// 导入二级路由
// import Article from '@/views/article'
// import Collect from '@/views/collect'
// import Like from '@/views/like'
// import User from '@/views/user'
const Article = () => import('@/views/article')
const Collect = () => import('@/views/collect')
const Like = () => import('@/views/like')
const User = () => import('@/views/user')

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    // 一级路由: 首页layout,详情页detail,注册register,登录login
    // 二级路由: 面经文章article,收藏collect,喜欢like,我的user
    {
      path: '/',
      component: Layout,
      redirect: '/article',
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User }
      ]
    },
    { path: '/detail/:id', component: Detail },
    { path: '/register', component: Register },
    { path: '/login', component: Login }
  ]
})

// 全局前置导航守卫:
// 当一个导航触发 (需要去某个网页) 时，全局前置守卫按照创建顺序调用。
// 守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

// 在每一个路由被真正的访问之前, 都会先经过路由前置导航守卫
// 只有前置导航守卫放行了, 才可以访问到对应的网页

// 每个路由在即将被访问匹配时, 都会调用beforeEach的回调函数
// to: 去哪里, 要去的路由信息对象(路径)
// from: 从哪来, 从哪个路由地址过来的
// next：是否放行
//  (1) next(): 放行
//  (2) next(path): 拦截某路由路径

// 设置白名单
const WhiteList = ['/register', '/login']

// 导航守卫: 判断有无token, 进行判断拦截
router.beforeEach((to, from, next) => {
  // 1.去的是白名单网页, 可以不用token
  // 2.去的是内部页面, 需要token

  const token = getToken()
  // 有token, 随意去任何网页
  // 无token, 需判断用去的是哪个网页, 白名单网页可以随意, 其他网页拦截
  if (token) {
    next()
  } else {
    // 判断当前要去的路径是否在白名单中出现了
    // 出现了, 表示在白名单内, 可以访问
    // 没出现，表示不在白名单内, 拦截到登录页
    if (WhiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
    }
  }
  // (to.path === WhiteList)
})

export default router
